<template>
	<view>
		<u-popup :show="show"  mode="center" :closeable="true" :round="25" @close="close">
		   <view class="popDialog">
			   <view class="flex-center m-b-40" style="margin-top: -160rpx;">
			   	<image :src="$util.img('image/beyond.png')" mode="" class="beyond" lazy-load></image>
			   </view>
			   <view class="main">
				<scroll-view scroll-y="true" style="max-height: 500rpx;" class="scroll">
					<view class="flex-x-between m-b-40" v-for="(item,index) in warnData" :key="index"> 
						<view class="c-77">{{item.name}}</view>
						<view class="flex-y-center">
							{{item.check_value}}{{item.default_unit}}
							<block v-if="item.alert_type == 2">
								<image :src="$util.img('image/down.png')" mode="" class="img" lazy-load></image>
								<text class="ellipsis" style="color: #FF7621;width:200rpx;display:inline-block;">降低{{item.trigger_value}}</text>
							</block>
							<block v-else>
								<image :src="$util.img('image/up.png')" mode="" class="img" lazy-load></image>
								<text class="ellipsis" style="color: #FF2121;width:200rpx;display:inline-block;">超出{{item.trigger_value}}</text>
							</block>
						</view>
					</view>
				</scroll-view>
			   </view>
			   <view class="confirm" @click="close()">确定</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name:"warn",
		props: {
		  show: {
		    type: Boolean,
		    default: false
		  },
		},
		data() {
			return {
				warnData:[]
			};
		},
		created() {
			this.getWarnData();
		},
		methods: {
		  close() {
		    this.$emit("close")
		  },
		  getWarnData() {
				this.$api.sendRequest({
			      url: "/api/userHealth/getAlertDetail",
			      data: {},
			      success: res => {
			        if(res.code == 0&&res.data.length>0) {
						this.warnData = res.data;
			        }
			      }
			    })
		  },
		 
		}
	}
</script>

<style lang="scss" scoped>
.popDialog {
  width: 702rpx;
  padding: 40rpx;
  border-radius: 50rpx;
  box-sizing: border-box;
  background: linear-gradient(180deg, #FFDDD2 0%, #F7F7F7 11.8%);
  
  .beyond {
	width: 280rpx;
	height: 329rpx;
  }
  .main {
	  background: #fff;
	  border-radius: 20rpx;
	  padding: 30rpx;
	  .img {
		  width: 26rpx;
		  height: 26rpx;
		  margin-left: 20rpx;
	  }
  }
}

.confirm {
	width: 620rpx;
	height: 100rpx;
	border-radius: 100rpx;
	background: #FF4D21;
	line-height: 100rpx;
	text-align: center;
	color: #fff;
	margin-top: 50rpx;
}
</style>